<template>
	<view class="contents">
		<view class="back">
			<view class="left">
				<image src="../../static/backwhite.png" mode="" @click="backPrePage"></image>
			</view>
			<view class="mid">
			</view>
			<view class="right">
				<image src="../../static/zhuye.png" mode="" @click="backindex"></image>
			</view>
		</view>

		<view class="page_title">
			每日一签
		</view>
		<view class="bgc_img">
			<image src="../../static/dailycheckbgi.png" mode=""></image>
		</view>
		<view class="main">
			<view class="prejifen">
				当前积分:{{prejf}}
			</view>
			<view class="day">
				<view class="">
					已坚持
				</view>
				<view class="tianshu">
					<image src="../../static/qiandaotianshu.png" mode="widthFix"></image>
					<view class="">
						<text class="bai">{{bai}}</text>
						<text class="shi">{{shi}}</text>
						<text class="ge">{{ge}}</text>
					</view>

				</view>
				<view class="">
					天签到
				</view>
			</view>
			<view class="leiji">
				累计积分奖励
			</view>
			<view class="tip_btn" @click="goJifen">
				签到获取积分兑换好礼
			</view>
			<view class="signintu">
				<view class="signinnum">
					已连续签到<text>{{sign_num}}</text>天
				</view>
				<view class="fanbei">
					连续签到七天可享受积分翻倍的机会
				</view>
				<view class="jilu">
					<view class="jiangli">
						<view class="zt" v-for="(item,i) in jifen" :key="i" :class="sign_num==i?'active':''">
							<image src="../../static/Union.png" mode="widthFix"></image>
							<text class="jifen">
								{{item.sign_num}}积分
							</text>
						</view>
					</view>
					<view class="" style="height: 28rpx;"></view>
					<van-progress :percentage="percentage" color="#36C67D" stroke-width="8" show-pivot="false" />
				</view>
			</view>

			<button class="mssignin" @click="gotoSignin" :disabled=issign>  
				{{issign?'今日已打卡':'马上打卡'}}
			</button>
		</view>


		<view class="signin_rules">
			<view class="left"></view>
			<view class="rule">
				签到规则
			</view>
			<!-- <view class="rule1">
				签到规则
			</view> -->
			<view class="right"></view>
		</view>
		<view class="signin_record">
			<view class="attention">
				每日签到一次,连续签到奖励积分更多
			</view>
			<view class="checkin_time">
				<view class="checkin_item" v-for="(item,index) in signindata" :key="index">
					<view class="date">
						<view class="title">
							每日签到
						</view>
						<view class="time">
							<view class="ymd">
								{{item.add_time.split(' ')[0]}}
							</view>
							<view class="sfm">
								{{item.add_time.split(' ')[1]}}
							</view>
						</view>
					</view>
					<view class="jifen">
						+{{item.number}}
					</view>
				</view>
			</view>
			<view style="text-align: center; color: #999;" v-if="isreachbot">
				到底了哦,没有更多数据了
			</view>
		</view>
	</view>
</template>

<script>
	import {
		signinInfo,
		signinDetail,
		signinData,
		userSignin,
		obtainUserInfo
	} from '@/api/api.js'
	export default {
		data() {
			return {
				prejf: 0, //当前积分
				signCount: 0, //签到总天数
				signindata: [],
				bai: 0, //签到天数百位
				shi: 0, //签到天数十位
				ge: 0, //签到天数个位
				total: '', //签到总记录数
				page: 1, //当前页码
				isreachbot: false, // 是否加载完毕
				issign: '', //是否已签到
				sign_num: '', //连续签到第n天
				percentage: '', //签到进度
				jifen:''       //第几天对应的积分
			}
		},
		onLoad() {
			    this.signinData(),
				this.signinDetail(),
				this.obtainUserInfo()
			    // 连续打卡天数对应的进度
			    // this.signinProess()
				this.signinProess1()
				
		},
		
		// 触底加载下一页记录
		onReachBottom() {
			// console.log(this.total)
			// console.log(this.signindata.length)
			if (this.total == this.signindata.length) {
				this.isreachbot = true
				return uni.showToast({
					duration: 2000,
					title: '到底了',
					icon: 'error'
				})
			}
			this.page = this.page + 1
			uni.showLoading({
				title: '加载中'
			});
			let time = setTimeout(() => {
				let data = `page=${this.page}&limit=10`
				signinDetail(data).then(res => {
					if (res.data.code == '200') {
						uni.hideLoading()
						this.signindata.push(...res.data.data.list)
						this.total = res.data.data.total
					} else {}
				})
				clearTimeout(time)
			}, 1500)

		},
		methods: {
			// 返回上一页
			backPrePage() {
				uni.navigateBack()
			},
			// 返回首页
			backindex() {
				uni.switchTab({
					url: '/pages/home/index/index'
				})
			},
			goJifen(){
				uni.navigateTo({
					url:'/myIndex/IntegralMall/IntegralMall'
				})
			},
			// 用户当前积分
			obtainUserInfo() {
				obtainUserInfo().then(res => {
					// console.log(res)
					if (res.data.code == '200') {
						this.prejf = res.data.data.gold_num
						this.sign_num = res.data.data.sign_num
						uni.setStorageSync('sign_num',this.sign_num)
					}
					console.log('用户当前打卡天数',this.sign_num)
				})
			},
			// 用户签到天数
			signinData() {
				signinData().then(res => {
					// console.log(res)
					this.issign = res.data.data.signed
					this.jifen = res.data.data.signConfig
					// console.log(this.jifen)
					if (res.data.code == '200') {
						this.signCount = res.data.data.signCount
					}
					if (this.signCount < 10) {
						this.bai = 0,
							this.shi = 0,
							this.ge = this.signCount
					} else if (this.signCount < 99) {
						this.bai = 0,
							this.shi = Math.floor(this.signCount / 10),
							this.ge = this.signCount % 10
					} else if (this.signCount < 999) {
						this.bai = Math.floor(this.signCount / 100),
							this.shi = Math.floor(this.signCount % 100 / 10),
							this.ge = this.signCount % 10
					}
				})
			},
			
			// 去签到
			gotoSignin() {
				userSignin().then(res => {
					// console.log(res)
					if (res.data.code == '200' && !this.signed) { 
						this.obtainUserInfo()
						this.signinProess()
						
						this.signinData()
						this.signinDetail()
						uni.showToast({
							title:res.data.msg,
							duration:1500
						})
					}
					if(uni.getStorageSync('sign_num')<7) {
						this.sign_num = uni.getStorageSync('sign_num')+1
					}
					else {
						this.sign_num = 1
					}
					
					console.log('连续天数', this.sign_num)
				})
			},
			// 连续打卡天数对应的进度
			signinProess() {
				// console.log('uni.getStorageSync(sign_num)',uni.getStorageSync('sign_num'))
				if(uni.getStorageSync('sign_num')<7) {
					this.sign_num = uni.getStorageSync('sign_num')+1
				}
				else {
					this.sign_num = 1
				}
				console.log('sign_num', this.sign_num)
				if (!this.sign_num) {
					this.percentage = 0
				}
				if (this.sign_num == 0) {
					this.percentage = 0
					// this.percentage = (100 / 12).toFixed(2)
				} else if (this.sign_num == 1) {
					this.percentage = (100 / 12 * 1).toFixed(2)
				} else if (this.sign_num == 2) {
					this.percentage = (100 / 12 * 3).toFixed(2)
				} else if (this.sign_num == 3) {
					this.percentage = (100 / 12 * 5).toFixed(2)
				} else if (this.sign_num == 4) {
					this.percentage = (100 / 12 * 7).toFixed(2)
				} else if (this.sign_num == 5) {
					this.percentage = (100 / 12 * 9).toFixed(2)
				} else if (this.sign_num == 6) {
					this.percentage = (100 / 12 * 11).toFixed(2)
				} else if (this.sign_num == 7) {
					this.percentage = (100).toFixed(2)
				}
				
				console.log(this.percentage)
			},
			// 连续打卡天数对应的进度
			signinProess1() {
				this.sign_num = uni.getStorageSync('sign_num')
				console.log('sign_num', this.sign_num)
				if (!this.sign_num) {
					this.percentage = 0
				}
				if (this.sign_num == 0) {
					this.percentage = 0
					// this.percentage = (100 / 12).toFixed(2)
				} else if (this.sign_num == 1) {
					this.percentage = (100 / 12 * 1).toFixed(2)
				} else if (this.sign_num == 2) {
					this.percentage = (100 / 12 * 3).toFixed(2)
				} else if (this.sign_num == 3) {
					this.percentage = (100 / 12 * 5).toFixed(2)
				} else if (this.sign_num == 4) {
					this.percentage = (100 / 12 * 7).toFixed(2)
				} else if (this.sign_num == 5) {
					this.percentage = (100 / 12 * 9).toFixed(2)
				} else if (this.sign_num == 6) {
					this.percentage = (100 / 12 * 11).toFixed(2)
				} else if (this.sign_num == 7) {
					this.percentage = (100).toFixed(2)
				}
				
				console.log(this.percentage)
			},
			// 签到明细记录列表
			signinDetail() {
				
				let data = `page=${this.page}&limit=10`
				signinDetail(data).then(res => {
					// console.log(res)
					if (res.data.code == '200') {
						this.signindata = res.data.data.list
						this.total = res.data.data.total
					}
					// console.log(this.signindata)
					// console.log(this.total)
				})
			},
		}
	}
</script>

<style lang="scss">
	.contents {
		width: 100%;
		min-height: 100vh;
		background-color: rgb(245, 245, 245);
		position: relative;

		.back {
			z-index: 9999;
			box-sizing: border-box;
			width: 180rpx;
			height: 64rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			left: 36rpx;
			top: 100rpx;
			border: 2rpx solid #fff;
			border-radius: 30rpx;
			padding: 0 10rpx;

			.mid {
				width: 4rpx;
				height: 40rpx;
				background-color: #fff;
			}

			.left {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				width: 46rpx;
				height: 46rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}


		}

		.page_title {
			z-index: 9999;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 110rpx;
			color: #fff;
		}

		.bgc_img {
			width: 100%;
			height: 850rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.main {
			width: 694rpx;
			margin: 0 auto;
			color: #fff;
			position: absolute;
			left: 50%;
			top: 200rpx;
			transform: translateX(-50%);

			.day {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 80rpx 28rpx 0;

				.tianshu {
					position: relative;
					color: rgb(73, 199, 134);
					margin: 0 28rpx;

					image {
						width: 250rpx;
					}

					>view {
						font-size: 64rpx;
						font-weight: 600;
						height: 100%;
						width: 100%;
						position: absolute;
						top: 0;
						left: 0;
						display: flex;
						justify-content: space-around;

						text {
							line-height: 106rpx;
						}
					}


				}
			}

			.leiji {
				text-align: center;
				margin-top: 20rpx;
			}

			.tip_btn {
				width: 640rpx;
				height: 82rpx;
				line-height: 82rpx;
				text-align: center;
				margin: 48rpx auto;
				border-radius: 36rpx;
				background-color: rgb(82, 224, 150);
			}

			.signintu {
				width: 694rpx;
				height: 240rpx;
				background-color: #fff;
				border-radius: 20rpx;

				.signinnum {
					font-size: 36rpx;
					text-align: center;
					color: #000;

					>text {
						color: rgb(73, 199, 134);
						font-size: 56rpx;
						font-weight: 600;
					}
				}

				.fanbei {
					color: #999;
					font-size: 24rpx;
					text-align: center;
				}

				.jilu {
					.jiangli {
						display: flex;
						box-sizing: border-box;
						// padding-left: 40rpx;
						.zt {
						margin: 0 10rpx;
						position: relative;
						width: 92rpx;
						height: 36rpx;
						opacity: 0;
						&.active {
							opacity: 1;
						}
						image {
							width: 80rpx;
							height: 36rpx;
						}

						.jifen {
							position: absolute;
							text-align: center;
							line-height: 36rpx;
							font-size: 20rpx;
							width: 80rpx;
							height: 36rpx;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
						}
					}
					}
					

				}
			}

			.mssignin {
				margin: 36rpx auto;
				background-color: rgb(54, 161, 106);
				width: 500rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 44rpx;
				color: #fff;
			}
		}


		.signin_rules {
			width: 440rpx;
			margin: 200rpx auto 0;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.left,
			.right {
				width: 120rpx;
				height: 6rpx;
				scale: 0.6;
				background-color: rgb(54, 161, 106);
				border-radius: 10rpx;
			}

			.left {
				// background-image: linear-gradient(180deg, #fff 10rpx, #1AB374 100rpx);
			}

			.right {}

			.rule {
				margin: 0 36rpx;
				color: rgb(54, 161, 106);
				transform: translateX(2rpx);
				font-weight: 900rpx;
				font-size: 32rpx;
			}

			// .rule1 {
			// 	position: absolute;
			// 	top: 50%;
			// 	transform: translateY(-50%);
			// 	color: #fff;

			// }
		}

		.signin_record {
			width: 694rpx;
			margin: 28rpx auto 0;

			.attention {
				color: #999;
				display: flex;
				align-items: center;
				margin-bottom: 48rpx;

				image {
					width: 12rpx;
					height: 12rpx;
				}
			}

			.checkin_time {
				background-color: rgb(255, 255, 255);
				border-radius: 10rpx;

				// height: 500rpx;
				.checkin_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 0 28rpx;
					padding: 28rpx 0;
					border-bottom: 2rpx dotted gray;

					.date {
						flex: 1;

						.time {
							display: flex;
							font-size: 24rpx;
							color: #999;
							margin-top: 20rpx;

							.ymd {
								margin-right: 28rpx;
							}
						}
					}

					.jifen {
						width: 140rpx;
						font-size: 36rpx;
						font-weight: 600;
						color: #999;
					}
				}
			}
		}
	}
</style>
